<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1.0, user-scalable=no">
    <title>封装好的实现拖拽函数</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            touch-action: pan-y;
        }

        #box {
            width: 300px;
            height: 300px;
            border: 1px red solid;
            margin: 0 auto;
            position: relative;
            margin-top: 100px;
            /* display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center; */
        }

        #box2 {
            border: 1px red solid;
            height: 1400px;
            width: 300px;
            margin: 0 auto;
        }

        .moveBox {
            position: relative;
            width: 100px;
            height: 100px;
            border: 1px red solid;
            top: 60px;
            left: 40px;
            margin-top: 10px;
            margin-left: 10px;
        }

        .moveBox2 {
            width: 100px;
            height: 100px;
            border: 1px red solid;
            margin-top: 60px;
            margin-left: 30px;
        }

        .con {
            width: 300px;
            height: 300px;
            /* border: 1px red solid; */
            margin-top: 60px;
            margin-left: 60px;
            /* background-color: slategrey; */
        }

        .moveBox3 {
            width: 100px;
            height: 100px;
            border: 1px red solid;
            margin-top: 160px;
            margin-left: 30px;
        }

        .moveBox4 {
            width: 100px;
            height: 100px;
            border: 1px red solid;
            margin-top: 60px;
            margin-left: 30px;
        }

        .srollPrevent {
            overflow: scroll;
            overflow-x: hidden;
            overflow-y: hidden
        }

        #box3 {
            border: 1px red solid;
            height: 400px;
            width: 300px;
            margin: 0 auto;
        }

        #con3 {
            border: 1px red solid;
            height: 200px;
            width: 150px;
            margin: 0 auto;
        }

        .moveBox5 {
            width: 100px;
            height: 100px;
            border: 1px red solid;

        }
    </style>
</head>

<body>
    <!--
            data-drag       设置元素可以移动  必填   box(固定)
            data-range      元素移动范围      选填   parent(元素移动范围为父元素)/screen(元素移动范围为浏览器可视区域)(默认)/移动范围元素的id
            data-direction  元素移动方向      选填   vertical(垂直移动)/landscape(横向移动)/all(默认)
         -->
    <div id="box">
        <!-- 移动范围是父元素 -->
        <div class="moveBox" data-drag="box" data-range='parent'>
            111
        </div>
        <span style="border: 1px red solid">span</span>
        <!-- 移动范围是可视区域 -->
        <div class="moveBox2" data-drag="box" data-direction="vertical">
            2222
        </div>

    </div>

    <div id="box2">
        <div class="con" style="border: 1px red solid">
            <!-- 移动范围是父元素 -->
            <div class="moveBox3" data-drag="box" data-range='parent' data-direction="landscape">
                3333
            </div>
        </div>
        <!-- 移动范围是可视区域 -->
        <div class="moveBox4" data-drag="box" data-direction="all">
            4444
        </div>
    </div>

    <div id="box3">
        <div id="con3">
            <!-- 指定移动范围 -->
            <div class="moveBox5" data-drag="box" data-range='box3' data-direction="all">
                5555
            </div>
        </div>
    </div>

</body>
<script type="module">
    import init from '../index.js'
    init()

    //订阅testEvent事件
    window.Observer.addEventListen('testEvent', function (data) {
        console.log('callback' + data);
        console.warn('top', JSON.parse(data).top)
        console.warn('left', JSON.parse(data).left)
    });
</script>

</html>